{extend name="extra@admin/content"}

{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}
</style>
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <div class="layui-form-item" id="add">
        <div class="layui-inline">
            <label class="layui-form-label">添加属性</label>
        <input type="button" lay-filter="add" onclick="tianjia();" value="+" ></button>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2">
        {if isset($goods_id)}<input type='hidden' value='{$goods_id}' name='goods_id'/>{/if}
        {if isset($spec_name)}<input type='hidden' value='{$spec_name.id}' name='spec_id'/>{/if}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存属性</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">{$spec_name.name}</label><div class="layui-input-inline" style="width: 100px;"><input type="text" name="detail[]" autocomplete="off" required="required" placeholder="请输入属性名称" class="layui-input" value=""></div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price[]" autocomplete="off" required="required" placeholder="请输入属性价格" class="layui-input" value=""></div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="recipe_ratio[]" autocomplete="off" required="required" placeholder="请输入配方比例" class="layui-input" value=""></div><input type="button" onclick="reduce(this)" value="-"></div></div>';
        var html = ht;
        $("#add").before(html);
        window.form.render('select'); //刷新select选择框渲染
    }
    function reduce(obj){
        $(obj).parent().remove();
    }
</script>
</form>

{/block}